<template>
  <div id="capitaRecords" class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
            <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/virtualCardList' }">水卡列表</el-breadcrumb-item>
            <el-breadcrumb-item>资金记录</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span">订单编号:</span>
              <el-input size="medium" type="text" placeholder="请输入订单编号" style="width: 160px;" v-model="order_number">
              </el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span same-search-fisrt">支付时间:</span>
              <el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="开始时间"></el-date-picker>
              <div class="same-interval">至</div>
              <el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="结束时间"></el-date-picker>
            </div>
            <div class="same-left-one" v-if="!moveShow">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
                  :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

              <el-button type="primary" size="medium" @click="findJfList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
        <!-- 搜索更多 -->
        <div>
          <div class="same-search-left new-sear-height" ref="leftHeight">
            <div class="same-left-one">
              <span class="same-search-span">资金类型:</span>
              <el-select size="medium" v-model="type" placeholder="请选择" style="width:140px">
                <el-option v-for="item in selected_type" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">业务类型:</span>
              <el-select size="medium" v-model="btype" placeholder="请选择" style="width:140px">
                <el-option v-for="item in selected_btype" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
                  :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

              <el-button type="primary" size="medium" @click="findJfList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
      </div>
    </div>
    <div class="same-table-box">
      <div class="table_box">

        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
            :data="tableData" stripe>
            <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*row}}
							</template>
						</el-table-column>
            <el-table-column align="center" prop="card_num" label="卡号">
            </el-table-column>

<!--            <el-table-column align="center"  label="订单编号">-->
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.order_number|| '————'}}-->
<!--              </template>-->
<!--            </el-table-column>-->


            <el-table-column align="center" width="120" label="变动金额">
              <template slot-scope="scope">
                <el-tag size="mini" type="success" v-if="scope.row.type == 1">+</el-tag>
                <el-tag size="mini" type="warning" v-else>-</el-tag>{{scope.row.money|filterNumber}}元
              </template>
            </el-table-column>

            <el-table-column align="center" prop="btype" label="变动类型">
            </el-table-column>
            <el-table-column align="center" prop="note" show-overflow-tooltip label="备注">
            </el-table-column>
            <el-table-column align="center" prop="add_time" label="时间">
            </el-table-column>

            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>

          <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageNo" :page-sizes="sizes" :page-size="row" layout="total,prev, pager, next, jumper, sizes"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'cardCapital',
    data: function () {
      return {
        date1: '',
        date2: '',
        loading: false,
        isLoad: false,//是否请求
        pageNo: 1,
        row: 15,
        sizes: [15, 30, 40, 50],
        total: 0,
        currentPage: 1,
        start_time: '',
        end_time: '',
        tableData: [], // 返回的结果集合
        time: '', // 结束时间
        cardNum: '',//水卡卡号
        water_id: 0,
        selected_type: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '收入'
          },
          {
            value: '2',
            label: '支出'
          }
        ],
        type: '',
        selected_btype: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '充值'
          },
          {
            value: '2',
            label: '打水'
          },
          // {
          //   value: '3',
          //   label: '平账'
          // },
          {
            value: '4',
            label: '后台修改'
          },
          {
            value: '5',
            label: '充值赠送'
          },
          {
            value: '6',
            label: '促销活动赠送'
          },
          {
            value: '7',
            label: '年审'
          }
        ],
        btype: '',
        order_number: '',

        moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
        moveShow: false,//是否开启动画
        scrollHeight: '',//需要监听的高度
      }
    },
    computed: {},
    // 初始化执行
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      var that = this;
      that.water_id = that.$route.query.water_id;
      var pageSize = that.pageSize;        // 每页显示条数
      var pageNo = that.pageNo;              // 当前页
      that.cardCapitalList(pageNo, pageSize);  // 获取资金记录列表
    },
    inject: ['reload'],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      reset() {
        this.date1 = '';
        this.date2 = '';
        this.type = '';
        this.btype = '';
        this.order_number = '';
        this.pageNo = 1;
        this.cardCapitalList();
      },
      //搜索
      findJfList() {
        this.pageNo = 1;
        this.cardCapitalList();
      },
      //每页
      handleSizeChange(val) {
        this.row = val;
        this.pageNo = 1;
        this.cardCapitalList();
      },
      //分页
      handleCurrentChange(val) {
        this.pageNo = val;
        this.cardCapitalList();
      },
      // 获取资金记录
      cardCapitalList: function (page, pageSize) {
        var that = this;
        that.loading = true; //打开loading动画
        that.isLoad = false;
        // ajax请求
        that.$post({
          url: 'Partner/WaterCard/waterCardCapitalRecordList',
          data: {
            page: that.pageNo,
            row: that.row,
            id: that.water_id,
            start_time: that.date1 ? that.date1 : '',
            end_time: that.date2 ? that.date2 : '',
            type: that.type,
            btype: that.btype,
            order_number: that.order_number,
          },
          success: (data) => {
            that.loading = false; //打开loading动画
            that.isLoad = true;
            that.tableData = []; // 清空数据
            if (data.code == 1000) {
              that.tableData = data.data.data;
              that.total = Number(data.data.page.total_number);
              that.currentPage = data.data.page.current_page;
            }
          }
        })
      },
      //此处获取高度必须在dom元素创建完成之后才能获取
      gitHeight() {
        //  let clientHeight=this.$refs.leftHeight.clientHeight;
        let scrollHeight = this.$refs.leftHeight.scrollHeight;
        this.scrollHeight = scrollHeight;
        scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

      },
      openMore() {
        this.moveShow = !this.moveShow;
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      },
    },
    mounted() {
      this.gitHeight();
      //监听高度变化
      var that = this;
      window.addEventListener("resize", function () {
        let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
        that.scrollHeight = scrollHeight;
      });
    },
    watch: {
      // 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
      scrollHeight: function (val) {
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      }
    }
  }

</script>
<style>
  #capitaRecords {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }
</style>
